<!--
<template>
  <div>
    <input type="text" v-model="textToCopy" />
    <button @click="copyText">复制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToCopy: "要复制的文本内容"
    };
  },
  methods: {
    copyText() {
      const input = document.createElement("input");
      input.value = this.textToCopy;
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      alert("文本已复制到剪贴板！");
    }
  }
};
</script>
-->

<template>
  <div style="padding: 5px">
    <input type="text" v-model="textToCopy" />
    <a-row :gutter="8">
      <a-col :span="12">
        <a-card title="Java Entity">
          <a-textarea
            ref="textarea"
            v-model:value="value"
            placeholder="请输入Java代码"
            style="height: 85vh"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="Typescript Type">
          <template #extra>
            <a-button @click="handleCopy" type="primary">复制</a-button>
          </template>
          <div style="max-height: 85vh; overflow: auto; font-size: 16px">
            <div v-for="(item, index) in resultValue" :key="index">
              {{ item.split(' ')[2] }} : {{ typeMap[item.split(' ')[1]] || item.split(' ')[1] }} ;
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const textarea = ref()
const textToCopy = ref()

const value: string = ref('private String name;private int age;private boolean isActive;')
const resultValue: string[] = ref([])

const typeMap = {
  String: 'string',
  int: 'number',
  Integer: 'number',
  boolean: 'boolean'
}

watch(
  value,
  () => {
    const pattern = /private\s+(\w+)\s+(\w+)/gm
    var matches = value.value.match(pattern)
    resultValue.value = matches
  },
  {
    immediate: true
  }
)

function handleCopy() {
  textarea.value.select()
  document.execCommand('copy')
}
</script>

<style scoped></style>
